<!--
 * @Descripttion:
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2020-12-21 09:35:56
-->
<template>
    <div class='lb-app-tool'>
        <top-nav></top-nav>
        <div class="page-main">
          <el-row :gutter="25"  v-loading='loading'>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-for="(item,index) in appList" :key='index'>
              <div class="apps">
                <div class="app-item">
                    <!-- <lb-image :src="require('@/assets/app/' + aaa +'.png')" /> -->
                    <lb-image :src="item.icon" />
                    <div class="desc">
                        <div class="app-name">{{item.title}}</div>
                        <div class="app-text ellipsis-2">{{item.desc}}</div>
                    </div>
                    <!-- <lb-button type='success'>购买</lb-button> -->
                    <lb-button @click="jumpRoute(item.appUrl)">去使用</lb-button>
                </div>
            </div>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      aaa: 'pay',
      loading: false,
      appList: []
    }
  },
  created () {
    this.getAppAuth()
  },
  methods: {
    getAppAuth () {
      this.loading = true
      this.$api.getAppAuthList().then(res => {
        this.loading = false
        if (res.code === 200) {
          // let tmp = JSON.parse(JSON.stringify(res.data[0]))
          // tmp.title = '付费课程'
          // tmp.appUrl = `/app/payclass/classify`
          // res.data.push(tmp)
          this.appList = res.data
        }
      })
    },
    jumpRoute (url) {
      if (url) {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .lb-app-tool{
        .page-main{
            .app-item{
                // width: 480px;
                height: 80px;
                background: #F9F9F9;
                border-radius: 4px;
                margin-bottom: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                padding: 10px;
                &:hover{
                    background: #F2F6FC;
                     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
                }
                .el-image{
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                }
                .desc{
                    margin: 0 10px;
                    width: calc(100% - 160px);
                    font-size:12px;
                    color: $tipsColor;
                    .app-name{
                        font-size: 14px;
                        color: $fontColor;
                        line-height: 1.5;
                    }
                    .app-price{
                        color: #FEA523;
                    }
                    .app-text{
                      margin-top: 5px;
                      line-height: 1.3;
                    }
                }
            }
        }
    }
</style>
